<template>
  <div class="home" style="width: 100vw; height: 100vh; overflow: hidden">
    <el-container style="width: 100%; height: 100%; background-color: #f8f9fa">
      <el-header style="background-color: #007bff; color: #fff; height: 10%">
        <h2>Header</h2>
      </el-header>
      <el-container style="display: flex">
        <el-aside
          width="200px"
          style="background-color: #e9ecef; flex: 0 0 200px"
        >
          <!-- <h2>Aside</h2> -->
          <el-col :span="24">
            <!-- <h5 class="mb-2">Default colors</h5> -->
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>Navigator One</span>
                </template>
                <el-menu-item-group title="Group One">
                  <el-menu-item index="1-1">item one</el-menu-item>
                  <el-menu-item index="1-2">item two</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="Group Two">
                  <el-menu-item index="1-3">item three</el-menu-item>
                </el-menu-item-group>
                <el-sub-menu index="1-4">
                  <template #title>item four</template>
                  <el-menu-item index="1-4-1">item one</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
              <el-menu-item index="2">
                <el-icon><icon-menu /></el-icon>
                <span>Navigator Two</span>
              </el-menu-item>
              <el-menu-item index="3" disabled>
                <el-icon><document /></el-icon>
                <span>Navigator Three</span>
              </el-menu-item>
              <el-menu-item index="4">
                <el-icon><setting /></el-icon>
                <span>Navigator Four</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-aside>
        <el-main style="background-color: #fff; flex: 1">
          <h2>Main</h2>
          <editText />
        </el-main>
      </el-container>
      <el-footer style="background-color: #007bff; color: #fff; height: 10%">
        <h2>Footer</h2>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import editText from './text.vue'
</script>

<style scoped>
.home {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.el-header,
.el-aside,
.el-main,
.el-footer {
  margin: 0;
  padding: 0;
}

h2 {
  padding: 0;
  margin: 0;
}
</style>